<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/utils/mock-min.js"></script>
    <script src="../js/utils/jquery.min.js"></script>
</head>

<body>
   <!-- 弹窗-->
   <div id="window">登录成功</div>
   <div class="page">
       <!--注册页面-->
       <div class="reg-left" id="regx1">
           <!--圆圈-->
           <div class="circle cir-big"></div>
           <div class="circle cir-small"></div>
           <h2>Welcome Back!</h2>
           <p>已经有账号了嘛，去登录账号来进入奇妙世界吧！！！</p>
           <button id="go-login">去登录</button>
       </div>
       <div class="reg-right" id="regx2">
           <h2>注册账号</h2>
           <input type="text" placeholder="Username" id="username">
           <p id="shuname">账号为5-8位的小写字母</p>
           <input type="password" placeholder="Password" id="password">
           <p id="shupass">密码为6-16位的大小写字母、数字</p>
           <input type="password" placeholder="Confirm password" id="confirm">
           <p id="shucon">输入密码不一致</p>
           <button id="register">注册</button>
       </div>
       <!--登录页面-->
       <div class="login-left" id="logx1">
           <h2>登录账号</h2>
           <input type="text" placeholder="Username" id="userd">
           <input type="password" placeholder="Password" id="passd">
           <button id="login">登录</button>
       </div>
       <div class="login-right" id="logx2">
           <!--圆圈-->
           <div class="circle cir-big"></div>
           <div class="circle cir-small"></div>
           <h2>Hello Friend!</h2>
           <p>去注册一个账号，登录系统，让我们踏入奇妙旅途！！！</p>
           <button id="go-reg">去注册</button>
       </div>
   </div>
   <script>
       // $ = (selector) => {
       //     return document.querySelector(selector)
       // }
       function $(selector) {
           return document.querySelector(selector)
       }
       var _gologin = $('#go-login')
       var _goreg = $('#go-reg')
       var _logx1 = $('#logx1')
       var _logx2 = $('#logx2')
       var _regx1 = $('#regx1')
       var _regx2 = $('#regx2')

       // 跳转动画
       window.onload = function () {
           animationlogin = () => {
               return (_logx1.style.left = '0',
                   _logx2.style.right = '0',
                   _regx1.style.left = '-380px',
                   _regx2.style.right = '-580px')
           }
           _gologin.addEventListener('click', function () {
               animationlogin()
           })
           animationreg = () => {
               _logx1.style.left = '-580px'
               _logx2.style.right = '-380px'
               _regx1.style.left = '0'
               _regx2.style.right = '0'
           }
           animationreg()
           _goreg.addEventListener('click', function () {
               animationreg()
           })
       }


       // 封装弹窗
       const _window = $('#window')
       win = (con) => {
           _window.style.top = '20px'
           _window.style.opacity = '1'
           _window.innerText = con;
           setTimeout(function () {
               _window.style.top = '-50px'
               _window.style.opacity = '0'
           }, 1300)
       }

       // 注册
       const _username = $('#username')
       const _password = $('#password')
       const _confirm = $('#confirm')
       const _register = $('#register')

       // 正则
       var zzname = /^[a-z]{5,8}$/
       var zzpass = /^\w{6,16}$/

       var _shuname = $('#shuname')
       var _shupass = $('#shupass')
       var _shucon = $('#shucon')
       // 失去焦点事件
       _username.oninput = function () {
           if (zzname.test(_username.value)) {
               _shuname.style.color = 'transparent'
           } else {
               _shuname.style.color = 'red'
           }
       }
       _password.oninput = function () {
           if (zzpass.test(_password.value)) {
               _shupass.style.color = 'transparent'
           } else {
               _shupass.style.color = 'red'
           }
       }
       _confirm.oninput = function () {
           if (_password.value == _confirm.value) {
               _shucon.style.color = 'transparent'
           } else {
               _shucon.style.color = 'red'
           }
       }


       var userarr = localStorage.getItem('users') || '[]'
       userarr = JSON.parse(userarr)
       _register.addEventListener('click', function () {
           if (_username.value == '' || _password.value == '' || _confirm.value == '') {
               win('账号、密码不能为空')
               return;
           }
           if (zzname.test(_username.value) && zzpass.test(_password.value) && _password.value == _confirm.value) {
               var userobj = {
                   username: _username.value,
                   password: _password.value,
                   confirm: _confirm.value
               }
               for (var i = 0; i < userarr.length; i++) {
                   if (userarr[i].username == _username.value) {
                       win('账号重复')
                       return;
                   }
               }
               userarr.push(userobj)
               localStorage.setItem('users', JSON.stringify(userarr))
               animationlogin()
               _username.value = ''
               _password.value = ''
               _confirm.value = ''
               win('注册成功')
           } else {
               win('输入不合法')
           }

       })



       // 登录
       const _userd = $('#userd')
       const _passd = $('#passd')
       const _login = $('#login')

       _login.addEventListener('click', function () {
           if (_userd.value == '' || _passd.value == '') {
               win('账号、密码不能为空')
               return;
           }
           var bool = false;
           for (var i = 0; i < userarr.length; i++) {
               if (_userd.value == userarr[i].username && _passd.value == userarr[i].password) {
                   bool = true;
                   break;
               }
           }
           if (bool) {
               win('登录成功')
               //设置cookie失效时长
               let date = new Date();
               date.setTime(date.getTime() + 60*1000);
               document.cookie = "username=" + username + ";expires=" + date.toUTCString();
               setTimeout(function () {
                   window.location.href ='../view/sy.html'
               }, 1500)
           } else {
               win('账号或密码错误')
           }
       })
   </script>
</body>

</html>